import { mapGetters } from "vuex"
import viewMixins from "./mixins/view"
export default function () {
  return {
    props: ['data', 'isPreview', 'isShow', 'isRefresh'],
    mixins: [viewMixins()],
    data() {
      return {
        timer: null,
        isInit: false
      }
    },
    computed: {
      ...mapGetters(["isCollapse", "screen"]),
      echarts() {
        return this.config.echarts;
      },
      series() {
        return this.echarts.series;
      },
      label() {
        return this.series.label
      },
      legend() {
        return this.echarts.legend
      }
    },
    watch: {
      isCollapse() {
        this.refresh(true)
      },
      screen() {
        this.refresh(true)
      },
      isRefresh() {
        this.refresh(true, 310)
      },
      isShow() {
        this.refresh(true)
      },
      width() {
        this.refresh(true)
      },
      height() {
        this.refresh(true)
      },
      config: {
        handler() {
          this.refresh()
        },
        deep: true,
        immediate: true,
      },
      showData: {
        handler() {
          this.refresh()
        },
        immediate: true,
      }
    },
    methods: {
      refresh(isResize, time) {
        if (!this.data._isInit) {
          return
        }
        if (!this.isInit) { // 解决第一次添加组件，缩放滞后显示出边框的问题
          time = 310
          this.isInit = true
        }
        if (this.timer == null) {
          this.timer = setTimeout(() => {
            this.timer = null
            if (isResize) {
              this.$refs.main && this.$refs.main.updateChart()
            }
            else {
              const option = this.getOption()
              this.$refs.main && this.$refs.main.updateChart(option)
            }
          }, time || 100)
        }
      },
      getGrid({ left, right, top, bottom, containLabel }) {
        const grid = {
          left: left + "%",
          right: right + "%",
          top,
          bottom,
          containLabel,
        };
        return grid;
      },
      getLegend(pieData) {
        const {
          show,
          orient,
          position,
          widthAuto,
          width,
          itemWidth,
          itemHeight,
          textStyle,
          formatter,
          padding
        } = this.legend


        const legend = {
          show,
          orient,
          textStyle,
        };
        

        if (formatter) {
          legend.formatter = (name) => {
            let res = formatter.replace(/{name}/g, name);
            let value = pieData.find(t => t.name == name).value;
            res = res.replace(/{value}/g, value);
            return res;
          };
        }


        if (!widthAuto) {
          legend.width = width;
        }




        this.setProp(legend, 'itemWidth', itemWidth)
        this.setProp(legend, 'itemHeight', itemHeight)

        switch (position) {
          case "topLeft":
            legend.left = "left";
            legend.top = "top";
            if(padding != undefined && padding != null){
              legend.padding = [padding,0,0,padding];
            }
            break;
          case "topRight":
            legend.left = "right";
            legend.top = "top";
            if(padding != undefined && padding != null){
              legend.padding = [padding,padding,0,0];
            }
            break;
          case "bottomLeft":
            legend.left = "left";
            legend.top = "bottom";
            if(padding != undefined && padding != null){
              legend.padding = [0,0,padding,padding];
            }
            break;
          case "bottomRight":
            legend.left = "right";
            legend.top = "bottom";
            if(padding != undefined && padding != null){
              legend.padding = [0,padding,padding,0];
            }
            break;
          case "topCenter":
            legend.left = "center";
            legend.top = "top";
            if(padding != undefined && padding != null){
              legend.padding = [padding,0,0,0];
            }
            break;
          case "bottomCenter":
            legend.left = "center";
            legend.top = "bottom";
            if(padding != undefined && padding != null){
              legend.padding = [0,0,padding,0];
            }
            break;
        }

        return legend;
      },
      getColors({ color }) {
        if (color && color.length > 0) {
          return color.filter((t) => t.v).map((t) => t.v);
        }
      },
      getLabel({
        show,
        formatterType,
        formatter,
        color,
        position,
        fontWeight,
        fontSize,
      }) {
        const label = {
          show,
        };
        if (formatterType == "fn") {
          const myEvent = this.getEvent(this.config.labelFormatter);
          if (myEvent.res) {
            label.formatter = myEvent.fn;
          }
        } else if (formatter) {
          label.formatter = formatter.replace(/{e}/g, "\n");
        }

        this.setProp(label, "color", color);
        this.setProp(label, "position", position);
        this.setProp(label, "fontWeight", fontWeight);
        this.setProp(label, "fontSize", fontSize);

        return label;
      },

      getColor(colorBegin, colorEnd) {
        if (colorBegin && colorEnd) {
          // 设置渐变色
          return {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: colorBegin, // 0% 处的颜色
              },
              {
                offset: 1,
                color: colorEnd, // 100% 处的颜色
              },
            ],
          };
        } else if (colorBegin || colorEnd) {
          return colorBegin || colorEnd;
        }
      }
    }

  }
}